<template>
  <view class="calendar-back">
	  <view class="calendar" style="">
		  <img class="img" src="../../static/left.png" alt="" @click="monthImgChange(1)">
		  <text style="font-size: 35rpx;">{{year || yearData}}</text>
		  <img v-if="!isBig" class="img" src="../../static/right.png" alt="" @click="monthImgChange(2)">
		  <img v-else class="img" src="../../static/right-off.png" alt="" @click="monthImgChange(2)">
	  </view>
	  <view class="calendar-content">
		  <view :class="{'active' : newMonth==item.name}"  :style="{opacity: item.back}"  class="content-list" v-for="(item,index) in monthData" :key="index" style="" @click="monthChangeItem(item)">
		  	<text class="list-first"  >{{item.name}}</text>
			<img v-if="item.isShow && item.back==year" style="width: 80%;height: 80rpx;margin: 0 auto;" src="../../static/isHave.png" alt="">
		  </view>
	  </view>
  	
  </view>
</template>

<script>
	export default {
		props:{
			//月份数组
			list: {
				type: Array,
				default () {
					return []
				}
			},
			isShow:{
				type:Boolean,
				default:false
			},
			// 右边按钮是否可以点击
			isBig:{
				type:Boolean,
				default:true
			},
			isText:{
				type:Boolean,
				default:false
			},
			// 当前月份
			nowMonth:{
				type:String,
				default: '',
			},
			// 年
			year:{
				type:String,
				default:''
			},
			isHave:{
				Boolean,
				default:false
			},
		},
		data() {
			return {
				// isBackground:true,
				monthData:[],
				newMonth:null,//当前月份
				yearData:null//当前年份
				
			}
		},
		watch: {
			list:{
			    handler(newVlaue, oldValue) {
				    // console.log('///',newVlaue)
					this.monthData=newVlaue
					
			    },
			    immediate: true,
			    // deep: true,
			},
			nowMonth:{
				handler(newVlaue, oldValue) {
				    // console.log('子组件点击的月份',newVlaue)
					if(newVlaue){
						this.newMonth=Number(newVlaue)
					}else{//默认赋值当前月份
						var myDate = new Date(); //获取系统当前时间
						this.newMonth = myDate.getMonth() + 1
					}
					// console.log('默认',this.newMonth)
				},
				immediate: true,
			},
			year:{
				handler(newVlaue, oldValue) {
				    console.log('父组件传递过来的年份',newVlaue)
					if(newVlaue){
						this.yearData=Number(newVlaue)
					}else{//默认赋值当前月份
						var myDate = new Date(); //获取系统当前时间
						this.yearData = myDate.getFullYear()
					}
					console.log('赋值后的父组件传递过来的年份',this.year, this.yearData)
				},
				immediate: true,
			}
		},
		created() {
			console.log('监听子组件2监听子组件2监听子组件2监听子组件2',this.nowMonth)
		},
		methods:{
			// 月份点击事件
			monthChangeItem:function(data){
				console.log('data',data)
				this.$emit('monthChangeItem',data.name)
			},
			// 年份点击事件
			monthImgChange:function(item){
				// let myDate = new Date(); //获取系统当前时间
				// let year=myDate.getFullYear()
				// console.log('点击了哪边点击了哪边点击了哪边点击了哪边点击了哪边',year, this.yearData)
				// if(Number(this.year)==year ||  Number(this.year)<year){
				// 	this.isBig=false
				// }
				let obj={
					item:item,
					year:this.year
				}
				this.$emit('monthImgChange',obj)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-back{
		padding-bottom: 50rpx;
		.calendar{
			padding-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.img{
				width: 10%;
				height: 65rpx;
			}
			text{
				margin: 0 30rpx;
				font-weight: bold;
			}
		}
		.calendar-content{
			display: flex;
			flex-wrap: wrap;
			.content-list{
				background-color: #f6f6f6;
				margin-top: 20rpx;
				border-radius: 10rpx;
				text-align: center;
				width: 15%;
				height:100rpx;
				display: flex;
				margin-left: 10rpx;
				flex-direction: column;
				justify-content: space-around;
				.list-first{
					font-size: 35rpx;
					font-weight: bold;
				}
				.text-active{
					color: #fff;
				}
			}
			.content-list.active{
				background-color: #00BBD7 !important;
				color: #fff;
			}
			.content-list.back1{
				background-color:#639AFE !important;
			}
			
		}
		
	}
</style>